@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-radius: 2px
}

::-webkit-scrollbar-button {
    display: none
}

::-webkit-scrollbar-thumb {
    width: 8px;
    min-height: 15px;
    background: rgba(50, 50, 50, 0.3) !important;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-radius: 2px
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5) !important
}

.input-box-iframe {
    width: 1000px;
    height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
    margin: 0 auto;
    margin-bottom: 1.25rem;
}

.u-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.u-flex-wrap {
    flex-wrap: wrap;
}

.u-flex-nowrap {
    flex-wrap: nowrap;
}

.u-col-center {
    align-items: center;
}

.u-col-top {
    align-items: flex-start;
}

.u-col-bottom {
    align-items: flex-end;
}

.u-row-center {
    justify-content: center;
}

.u-row-left {
    justify-content: flex-start;
}

.u-row-right {
    justify-content: flex-end;
}

.u-row-between {
    justify-content: space-between;
}

.u-row-around {
    justify-content: space-around;
}

.u-text-left {
    text-align: left;
}

.u-text-center {
    text-align: center;
}

.u-text-right {
    text-align: right;
}

.u-flex-col {
    flex-direction: column;
}

.u-light-color {
    color: #c0c4cc;
}

.u-font-blod {
    font-weight: bold;
}


/* start--文本行数限制--start */

.u-line-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.u-line-2 {
    -webkit-line-clamp: 2;
}

.u-line-3 {
    -webkit-line-clamp: 3;
}

.u-line-4 {
    -webkit-line-clamp: 4;
}

.u-line-5 {
    -webkit-line-clamp: 5;
}

.u-line-2,
.u-line-3,
.u-line-4,
.u-line-5 {
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; // 弹性伸缩盒
    -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
}

body {
    height: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
    font-weight: 700;
}

html {
    height: 100%;
    box-sizing: border-box;
}

#app {
    height: 100%;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

a:focus,
a:active {
    outline: none;
}

a,
a:focus,
a:hover {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

div:focus {
    outline: none;
}

.clearfix {
    &:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
}

// main-container global css
.app-container {
    padding: 20px;
}

.search-input {
    width: 300px;
}

// 定义内外边距，历遍1-80
@for $i from 0 through 80 {
    // 只要双数和能被5除尽的数
    @if $i % 2==0 or $i % 5==0 {
        // 得出：u-margin-30或者u-m-30
        .u-margin-#{$i},
        .u-m-#{$i} {
            margin: $i + px !important;
        }
        // 得出：u-padding-30或者u-p-30
        .u-padding-#{$i},
        .u-p-#{$i} {
            padding: $i + px !important;
        }
        @each $short,
        $long in l left,
        t top,
        r right,
        b bottom {
            // 缩写版，结果如： u-m-l-30
            // 定义外边距
            .u-m-#{$short}-#{$i} {
                margin-#{$long}: $i + px !important;
            }
            // 定义内边距
            .u-p-#{$short}-#{$i} {
                padding-#{$long}: $i + px !important;
            }
            // 完整版，结果如：u-margin-left-30
            // 定义外边距
            .u-margin-#{$long}-#{$i} {
                margin-#{$long}: $i + px !important;
            }
            // 定义内边距
            .u-padding-#{$long}-#{$i} {
                padding-#{$long}: $i + px !important;
            }
        }
    }
}

// 定义字体(px)单位，小于20都为px单位字体
@for $i from 9 to 20 {
    .u-font-#{$i} {
        font-size: $i + px;
    }
}

// 定义字体(rpx)单位，大于或等于20的都为px单位字体
@for $i from 20 through 40 {
    .u-font-#{$i} {
        font-size: $i + px;
    }
}